<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="content-type" content="text/html;charset=UTF-8">
    <title></title>
    <style>
        body
        {
            font-size:.85em;
            font-family: "Trebuchet MS",Verdana,Helvetica;
            color: #232323;
            background-color: #fff;
        }
        #Pageing A{
            background-color: #008844;
            border:1px solid White;
            text-decoration:none;
            color:White;
            padding: .1em .6em .2em .6em;
        }
        #Pageing A.selected{ background-color: #AA7700;}
    </style>
</head>
<body>
    <h1>主机信息</h1>
    <table border="1">

        <tr>
            <td>主机名</td>
            <td>IP地址</td>
        </tr>
            {% for item in data %}
        <tr>
            <td>{{ item.HostName }}</td>
            <td>{{ item.IP }}</td>
        </tr>
    {% endfor %}
    </table>
    <div>总条数:{{ count }}</div>

    <div id ='Pageing'>
        {{ page }}
    </div>
    <div>
        <select id="s1" onchange="ChangePageItem(this);">
            <option value="30">30</option>
            <option value="50">50</option>
            <option value="100">100</option>
        </select>
    </div>
    <script src="/static/jquery/jquery-1.8.2.js"></script>
    <script src="/static/jquery/jquery.cookie.js"></script>
    <script type="text/javascript">
        $(function(){
            var per_item = $.cookie("pager_num");
            if(per_item){
                $('#s1').val(per_item);
            }
            else:{
                $.cookie("pager_num",10,{ path: '/' });
            }
        })
        function ChangePageItem(arg){
            //创建或者修改cookie值,借助于jQuery的cookie插件
            var value = $(arg).val();
            $.cookie("pager_num",value,{ path: '/' });
        }
    </script>
</body>
</html>